<template>
  <view class="color-palette">
    <view 
      v-for="color in colors" 
      :key="color.code"
      class="color-btn"
      :style="{ backgroundColor: color.code }"
      :class="{ 
        'selected': color.code === selectedColor,
        'hint': color.code === hintColor,
        'disabled': isAnimating
      }"
      @click="$emit('color-select', color.code)"
      :disabled="isAnimating"
    >
      <view class="color-name">{{ color.name }}</view>
    </view>
  </view>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useGameStore } from '@/store/game'

const gameStore = useGameStore()
const props = defineProps({
  colors: {
    type: Array,
    required: true
  },
  selectedColor: {
    type: String,
    required: true
  },
  isAnimating: {
    type: Boolean,
    default: false
  }
})

const hintColor = ref('')

// 监听提示颜色变化
watch(() => gameStore.hintsUsed, () => {
  // 这里可以实现提示颜色的高亮逻辑
  hintColor.value = gameStore.showHint() || ''
  
  // 3秒后取消高亮
  if (hintColor.value) {
    setTimeout(() => {
      hintColor.value = ''
    }, 3000)
  }
})
</script>

<style scoped>
.color-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  justify-content: center;
}

.color-btn {
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.color-btn.selected {
  border: 2rpx solid #fff;
  box-shadow: 0 0 0 2rpx #6C5CE7;
  transform: scale(1.1);
}

.color-btn.hint {
  animation: pulse 1.5s infinite;
  box-shadow: 0 0 0 2rpx #FD79A8;
}

.color-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.color-name {
  font-size: 20rpx;
  color: #fff;
  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.5);
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 2rpx #FD79A8;
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 0 4rpx #FD79A8;
  }
}
</style>